webpack 支持 SCSS

webpack.config.js

...
  module: {
    rules:[
      ...
        {
        test: /\.s[ac]ss$/i,
        use: [
            'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      ...
    ]
  }
...

支持@

xxx.scss

@import  '~@/scss-vars.scss'
...

SCSS 自动 import 全局文件

webpack.config.js

...
  module: {
    rules:[
      ...
        {
        test: /\.s[ac]ss$/i,
        use: [
            'style-loader',
          'css-loader',
          {
              loader:'sass-loader',
            options:{
                additionalData:`@import "~@/xxx.scss";`,
              sassOptions:{
                  includePaths:[__dirname]
              }
            }
          }
        ]
      },
      ...
    ]
  }
...

SCSS分享变量给JS

scss-exports.scss

:export{
    color:$color;
}

webpack.config.js

...
  module: {
    rules:[
      ...
        {
        test: /\.s[ac]ss$/i,
        use: [
            'style-loader',
          {
                loader:'css-loader',
            options:{
              modules:{
                compileType:'icss'  //支持export
              }
            }
            },
             ...
        ]
      },
      ...
    ]
  }
...

Webpack 支持 LESS 文件

webpack.config.js

...
  module: {
    rules:[
      ...
      {
            test: /\.less$/i,
        use: [
            'style-loader',
          {
                loader:'css-loader',
            options:{
              modules:{
                compileType:'icss'  //支持export
              }
            }
            },
          {
              loader:'less-loader'
          }
             ...
        ]
        },
      ...
    ]
  }
...

LESS 自动 import 全局文件

webpack.config.js

...
  module: {
    rules:[
      ...
      {
            test: /\.less$/i,
        use: [
            'style-loader',
          {
                loader:'css-loader'
            },
          {
              loader:'less-loader',
            options:{
                additionalData:`@import "~@/xxx.less";`
            }
          }
             ...
        ]
        },
      ...
    ]
  }
...

LESS分享变量给JS

webpack.config.js

...
  module: {
    rules:[
      ...
      {
            test: /\.less$/i,
        use: [
            'style-loader',
          {
                loader:'css-loader',
            options:{
              modules:{
                compileType:'icss'  //支持export
              }
            }
            },
          {
              loader:'less-loader',
            options:{
                additionalData:`@import "~@/xxx.less";`
            }
          }
             ...
        ]
        },
      ...
    ]
  }
...

SCSS v.s. LESS

选 scss
更灵活地可以使用stylus

支持 Stylus 文件

webpack.config.js

...
  module: {
    rules:[
      ...
      {
            test: /\.styl(us)$/i,
        use: [
            'style-loader',
          {
                loader:'css-loader',
            options:{
              modules:{
                compileType:'icss'  //支持export
              }
            }
            },
          {
              loader:'stylus-loader',
            options:{
                stylusOptions:{
                  import:[path.resolve(__dirname,'src/stylus-vars.stylus')]
              }
            }
          }
             ...
        ]
        },
      ...
    ]
  }
...

webpack config 优化

const cssLoaders = (...loaders) => [
  'style-loader',
  {
      loader:'css-loader',
      {
        loader:'css-loader',
        options:{
          modules:{
            compileType:'icss'  //支持export
          }
        }
      },
  },
  ..._loaders
]
...
  module: {
    rules:[
      ...
        {
        test: /\.s[ac]ss$/i,
          use:cssLoaders({
          loader:'sass-loader',
          options:{
            additionalData:`@import "~@/xxx.scss";`,
            sassOptions:{
              includePaths:[__dirname]
            }
          }
        })
      },
      {
        test: /\.less$/i,
          use:cssLoaders({
              loader:'less-loader',
            options:{
                additionalData:`@import "~@/xxx.less";`
            }
        })
      },
      {
        test: /\.styl(us)$/i,
          use:cssLoaders({
          stylusOptions:{
            import:[path.resolve(__dirname,'src/stylus-vars.stylus')]
          }
        })
      }
      ...
    ]
  }
...

生产环境提取单独的CSS文件

https://webpack.js.org/plugins/mini-css-extract-plugin/

λ yarn add mini-css-extract-plugin --dev
webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
const mode='production'
const cssLoaders = (...loaders) => [
  mode === ' production' ? MiniCssExtractPlugin.loader : 'style-loader',
  {
      loader:'css-loader',
      {
        loader:'css-loader',
        options:{
          modules:{
            compileType:'icss'  //支持export
          }
        }
      },
  },
  ..._loaders
]
...
module.exports={
  mode:mode
  ...
  plugins:[
    new ESLintPlugin({
      extensions:['.js','.jsx','.ts','.tsx']
    }),
    new MiniCssExtractPlug({
      filename:'[name].[contenthash].css'  //给css加hash
    })
  ],
  output:{
      filename:'[name].[contenthash].js'  //给js加hash
  },
  ...
  module:{
      ...
  }
}
...

自动生成HTML

https://webpack.js.org/plugins/html-webpack-plugin/
λ yarn add html-webpack-plugin --dev

const HtmlWebpackPlugin = require('html-webpack-plugin')
...
const mode='production'
const cssLoaders = (...loaders) => [
  mode === ' production' ? MiniCssExtractPlugin.loader : 'style-loader',
  {
      loader:'css-loader',
      {
        loader:'css-loader',
        options:{
          modules:{
            compileType:'icss'  //支持export
          }
        }
      },
  },
  ..._loaders
]
...
module.exports={
  mode:mode
  ...
  plugins:[
    new ESLintPlugin({
      extensions:['.js','.jsx','.ts','.tsx']
    }),
    mode === 'production' && new MiniCssExtractPlug({
      filename:'[name].[contenthash].css'  //给css加hash
    }),
    new HtmlWebpackPlugin()
  ].filter(Boolean),
  output:{
      filename:'[name].[contenthash].js'  //给js加hash
  },
  ...
  module:{
      ...
  }
}
...