Sourcemap Sass with Webpack (2) - javascript

I am using Webpack 2 for building my Angular (4) app. I have it working, but I am trying to figure out how to generate sourcemaps for my scss. In my components I load my scss with styleUrls Adding the options: { sourceMap: true } is not working. I do not want to extract the styles for components, because then the ViewEncapsulation is not working anymore. The .global.scss I use are needed everywhere, so I do extract these and this part works fine. Can someone tell me how to generate my sourcemaps (is it even possible with Angular)? Below is my webpack.config.js .
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
devtool: 'inline-source-map',
devServer: {
port: 3000,
contentBase: '/www',
inline: true
},
entry: {
polyfills: './src/polyfills.ts',
vendor: './src/vendor.ts',
app: './src/bootstrap.ts'
},
output: {
path: path.join(__dirname, '../www/'),
filename: '[name].bundle.js'
},
resolve: {
modules: [ path.join(__dirname, 'node_modules') ],
extensions: ['.js', '.ts', '.html']
},
module: {
loaders: [{
test: /\.ts$/,
exclude: /node_modules/,
use: ['awesome-typescript-loader', 'angular2-template-loader']
}, {
test: /\.html$/,
use: 'html-loader'
},{
test: /\.global\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:[{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader'
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
}
}]
}),
}, {
test: /\.scss$/,
use: [ {
loader: "raw-loader"
}, {
loader: 'resolve-url-loader'
}, {
loader: 'postcss-loader'
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}],
exclude: /node_modules/
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
use: 'url-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new ExtractTextPlugin('global-styles.css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['vendor']
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
})
]
};

Related

vuejs npm dev server does not show updated output

I am using vuejs in wordpress theme, everything is properly setup and working.
npm run build works perfectly and creates dist and wordpress picks up all content from it.
What's the issue then?
npm run dev also works in the console but when I made any change in a vue template it compiles but IT DOES NOT SHOW UPDATED OUTPUT.
Please guide and help.
webpack.config.dev.js
const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env.example')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env.example'),
path.resolve(__dirname, '../.env'),
);
}
module.exports = (options = {}) => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: 'http://localhost:9000/',
filename: 'js/[name].js',
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
exclude: /node_modules/,
},
{
test: /\.js|\.vue$/,
use: [{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
}, ],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
use: [
'vue-style-loader?sourceMap',
'css-loader?sourceMap',
'postcss-loader?sourceMap',
'sass-loader?sourceMap',
],
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
},
exclude: /node_modules/,
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
],
devServer: {
compress: true,
contentBase: path.join(__dirname, '../dist'),
headers: {
'Access-Control-Allow-Origin': 'http://localhost',
},
hot: true,
public: 'localhost:9000',
port: 9000,
overlay: {
errors: true,
warnings: true,
},
},
devtool: 'eval-source-map',
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
watch: options.watch === 'true',
};
return config;
};
webpack.vue.build.js
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env'),
path.resolve(__dirname, '../.env.example'),
);
}
module.exports = () => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'js/[name].js',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
scss: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.js|\.vue$/,
use: [
{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
},
],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
loader: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader!postcss-loader!sass-loader',
}),
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
publicPath: '../',
},
exclude: /node_modules/,
},
],
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'),
verbose: true,
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new ExtractTextPlugin('css/[name].css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.optimize.ModuleConcatenationPlugin(),
],
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
};
return config;
};
Screenshot to get some idea about folder structure:
http://prntscr.com/n0cbg1
add --watch in start field in package.json file.
or use this command for executing:
npm run build -- --watch

Ignoring Global SCSS Webpack CSSModule

I'm trying to configure my webpack to use css modules for all the scss files except for the files in the "src/scss" and "node_modules" folder. Below are my configuration file
const webpack = require('webpack');
const combineLoaders = require('webpack-combine-loaders');
const ImageMinPlugin = require('imagemin-webpack-plugin').default;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV || 'development';
const DEV_MODE = NODE_ENV !== 'production';
const PORT = process.env.PORT || 3000;
const FAVICON_DIR = './src/assets/favicon/favicon.png';
const ENTRY_CSS = path.resolve(__dirname, 'src/scss');
const NODE_MODULE_PATH = path.resolve(__dirname, 'node_modules')
console.log('ENTRY_CSS: ', ENTRY_CSS);
console.log('NODE_MODULE_PATH: ', NODE_MODULE_PATH);
const styleRules = () => [
{
test: /\.scss$/,
exclude: [
ENTRY_CSS,
NODE_MODULE_PATH
],
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: {
modules: true,
importLoaders: 1,
localIdentName: '[local]--[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
query: {
includePaths: ['./src'],
},
},
]),
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, 'src')
],
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: {
modules: true,
importLoaders: 1,
localIdentName: '[local]--[hash:base64:5]',
},
},
]),
},
/**
* for global style, import libs, no CSS module applied for those files imported here.
*/
{
test: /\.scss$/,
include: [
ENTRY_CSS,
NODE_MODULE_PATH
],
loader: combineLoaders([
{
loader: 'style-loader',
},
{
loader: 'css-loader',
query: {
modules: false,
},
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
query: {
includePaths: ['./src'],
},
},
]),
},
];
module.exports = {
entry: ['./src/index.tsx'],
mode: DEV_MODE ? 'development' : 'production',
devtool: DEV_MODE ? 'source-map' : '',
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
},
{
loader: 'ts-loader',
options: {
configFile: DEV_MODE ? 'tsconfig.json' : 'tsconfig.deploy.json',
},
},
],
},
...styleRules(),
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.(ttf|eot|woff)(\?v=[0-9].[0-9].[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.json'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.[hash].js',
},
devServer: {
contentBase: './dist',
compress: true,
port: PORT,
historyApiFallback: true,
open: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
'process.env.PORT': JSON.stringify(PORT),
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
...(FAVICON_DIR ? [new WebappWebpackPlugin(FAVICON_DIR)] : []),
new ImageMinPlugin({
disable: DEV_MODE,
pngquant: {
quality: '95-100',
},
test: /\.(jpe?g|png|gif|svg)$/i,
}),
],
};
I'm importing Bootstrap's SCSS files in "main.scss" which is place inside the "src/scss" folder. The bootstrap files are also being hashed by css modules when I run my app. Can I know what mistake am I doing?
You can use exclude option of css-loader,
loaders: [{
test: /\.scss$/,
exclude: fs.realpathSync('./node_modules/path/to/bootstrap/src/styles')
loader: cssModulesLoader,
}

url() in SCSS won't resolve correctly with Webpack 4

I have posted my Webpack configs below for a production environment. I am attempting to use background-image: url(../img/chevron-thin-right.svg); in one of my SCSS files but it is being resolved to background-image: url([object Module]) and therefore not working. I am trying to port a purely SCSS and HTML project into a react app being bundled by Webpack so this above approach used to work. Any fixes would be greatly appreciated.
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: './public/index.html',
favicon: './public/favicon.ico',
hash: true,
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf)$/,
use: {
loader: 'file-loader?limit=100000&name=images/[name].[ext]'
}
},
{
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{
removeTitle: true,
removeComments: true
}
],
floatPrecision: 2
}
}
}
]
}
]
}
};
webpack.prod.js
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {};
module.exports = merge(common, {
mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
root: path.resolve(__dirname),
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
'browsers': ['last 2 versions', 'ie >= 10'],
}),
],
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: [
'./src/client/style/scss',
],
},
}
]
}
]
}
});
In case anybody else is looking for an answer I was able to solve it. It was due to not loading the associated SVG through the url-loader. Another problem arose when adding svg back in because my inline SVGs I wanted to use as React components were running into errors as they were now going through the url-loader instead of my react-svg-loader.
Below is the working webpack.common.js and webpack.prod.js stayed the same. The solution was to differentiate my inline and external SVGs by turning all inline extensions from .svg to .inline.svg and adjusting webpack config accordingly
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: './public/index.html',
favicon: './public/favicon.ico',
hash: true,
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
exclude: /\.inline.svg$/,
use: {
loader: 'url-loader?limit=1000&name=images/[name].[ext]'
}
},
{
test: /\.inline.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{
removeTitle: true,
removeComments: true
}
],
floatPrecision: 2
}
}
}
]
}
]
}
};

Webpack - Sass loader not compiling Sass

I'm trying to introduce Sass-loader to an existing project so as to be able to use Sass in my React components. I've set this up successfully before in my own boiler plates and had no issues but for some reason with the current configuration it doesn't seem to play. It doesn't give any errors but rather doesn't do anything with my .scss file i'm trying to import.
I can see that there is some loaders in the cssLoaders config for Webpack which could be the culprit but I am only targeting .scss/ .sass files with the rule
test: /\.s(a|c)ss$/
so I wouldn't have thought this would affect it at all.
I have webpack setup with a common file and one for development. Here are both those files:
webpack.common.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
require('babel-polyfill');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: {
main: ['babel-polyfill', './src/index.js']
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }]
},
{
test: /\.s(a|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
outputPath: 'images/'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
},
plugins: [
new ErrorOverlayPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: 'index.html'
}),
new Dotenv(),
new CleanWebpackPlugin(['dist'])
]
};
And here is webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const paths = require('../paths');
module.exports = require('./webpack.config.base')({
bail: false,
devtool: 'cheap-module-eval-source-map',
stats: 'errors-only',
performance: {
hints: false
},
entry: {
main: [
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appPolyfillsJs,
require.resolve('react-error-overlay'),
paths.appIndexJs
]
},
output: {
pathinfo: true,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath)
},
// Load the CSS in a style tag in development
cssLoaders: [
{
loader: require.resolve('style-loader'),
options: {
sourceMap: true
}
},
{
loader: require.resolve('css-loader'),
options: {
modules: false,
sourceMap: true,
importLoaders: 1
}
},
{
loader: require.resolve('postcss-loader'),
options: { sourceMap: true }
}
],
babelQuery: {
cacheDirectory: true
},
plugins: [].concat([
new ProgressBarPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
failOnError: true
})
])
});
The part that I have added to the configuration is in webpack.common:
{
test: /\.s(a|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
I then just import it in the module like so:
import React, { PureComponent } from 'react';
import './test.scss';
...
Can anyone spot why the configuration is wrong?
The sass-loader requires node-sass and webpack as peerDependency.
Make sure node-sass is installed and edit the loader webpack.dev.js like so:
{
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}

Webpack doesn't generate app.bundle.css

I have the following webpack file, however, when I run npm run dev the name.bundle.css file doesn't get generated: (no errors either)
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, './resources/'),
entry: {
app: './index.jsx'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './public/assets/'),
publicPath: '/assets/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}],
}),
},
{
test: /\.jsx|js$/,
exclude: [/node-modules/],
use: [
{
loader: "babel-loader",
options: { presets: ['react', 'es2015', 'stage-1'] }
}
]
},
{
test: /\.(sass|scss)$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: ['file-loader?name=[name].[ext]']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=public/fonts/[name].[ext]'
}
]
},
resolve: {
modules: [
path.resolve(__dirname, './resources/'),
'node_modules'
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),
new ExtractTextPlugin({
filename: '[name].bundle.css'
})
]
}
my CSS folder is:
CSS
- app.scss
COMPONENTS
comp1.scss
comp2.scss
it works this way "import styles from './css/app.scss';" but I would expect this to generate a app.bundle.css:
new ExtractTextPlugin({
filename: '[name].bundle.css'
})
You have 2 rules for both css and sass.
I think in your case you only need one:
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
and like you said, you should import the scss files in the js files import './css/app.scss'

Categories