Question

我有以下文件夹结构：

|- webpack.config.js
|- src/
  |- main.js
  |- some.other.js.files
|- styles/
  |- app.scss
  |- animation.scss
  |- transition.scss
|- public/
  |- js/
    |- app.js

我已经配置了Webpack，它将获取所有css和js文件，并在app.js下将它们编译为public/js。这是配置：

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.to.public.js,
    filename: 'app.js'
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"]},
  }
}

现在我想创建另一个名为static.scss的scss文件，而不是像其他人一样将它添加到app.js中，我希望将它编译成{{1下的独立css文件}}。这样我就可以从存储库中其他地方的一些html文件链接到它。

我该怎么做？

Answer 1

您可以使用Extract Text WebPack插件提取特定的目标css：https://webpack.js.org/plugins/extract-text-webpack-plugin/

将scss文件编译到特定位置的css文件中

1 个答案: