sass - Webpack sass 到 css 指定特定文件夹？

Question

我一直在查看文档并检查其他人的问题，但我找不到如何将我的所有 sass 编译成一个简单的 css 文件并指定我希望生成的 css 文件输出到的目录的简单答案。

对于快速上下文：我有一个公共目录，其中包含一个样式表目录和一个构建目录。webpack 将应用程序编译成 build，我想让 sass 将 style.css 编译到 stylesheets 目录中。

这是我的公共目录的屏幕截图：

公共目录img

我希望能够在我的 webpack.config.js 中执行类似的操作（为简洁起见，仅显示相关代码）：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

...

// To be called in plugins:
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css');

内部模块加载器：

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
  },

在插件中：

  plugins: [
    .
    .
    .
    cssOutput,
  ],

我希望能够使用位于公共目录中的 index.html 文件中的这一行访问输出文件：

  <link rel="stylesheet" href="/stylesheets/style.css" />

我目前正在使用 gulp 执行此操作，并且效果很好，我只是想将所有内容都转换为 webpack。任何帮助将不胜感激！

Answer 1

原来你可以像这样设置输出文件：

const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true });

我犯了忘记添加的菜鸟错误：

require('_scss/style.scss');

在我的 index.jsx 文件中。

对于遇到此问题的任何人，我仍然遇到字体和图像问题，因此我必须在 webpack.config.js 的模块加载器中添加：

  {
    test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
    loader: 'file',
  },

由于这会将所有内容都输出到我的构建目录中，因此我只是更改了 css 以输出构建目录中的所有内容，以防止路径错误。我把它改成这样：

const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true });

希望这可以帮助遇到此类问题的其他人！

Answer 2

为我工作::

webpack.config.js

module.exports = {
   entry: ['./src/app.ts', './src/sass/style.scss'],
   module:{
          rules: [
          {
            test: /\.ts$/,
            use: 'ts-loader',
            include: [path.resolve(__dirname, 'src', 'src/class')]
          },
          {
            test: /\.scss$/,
            use: [
            {
              loader: 'file-loader',
              options: {
                name: '/css/[name].css'
              }
             },
             {
               loader: 'extract-loader'
             },
             {
               loader: 'css-loader?-url'
             },
             {
               loader: 'postcss-loader'
             },
             {
               loader: 'sass-loader'
             }
           ],
           include: [path.resolve(__dirname, 'src/sass')]
         }
     ]
 },
 output: {
     filename: 'js/app.js',
     path: path.resolve(__dirname, 'public')
  }
}

postcss.config.js

module.exports = {
 plugins: {
    'autoprefixer': {}
 }
}

包.json

{
  "name": "tsscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "nov": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
  "autoprefixer": "^9.8.5",
  "css": "^3.0.0",
  "css-loader": "^3.6.0",
  "extract-loader": "^5.1.0",
  "postcss-loader": "^3.0.0",
  "sass": "^1.26.10",
  "sass-loader": "^9.0.2",
  "style-loader": "^1.2.1",
  "ts-loader": "^8.0.0",
  "typescript": "^3.9.6",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.12"
 }
}

目录快照：

Answer 3

最近的解决方案，您可以使用mini-css-extract-plugin、css-loader和sass-loader。mini-css-extract-plugin可以为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

安装依赖项：

npm i -D mini-css-extract-plugin css-loader sass-loader

例如，包含样式的主 JS 文件是./src/index.js：

...
import './src/style.scss';
...

配置webpack.config.js：

...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  ...
  entry: {
    main: './src/index.js',
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  ...
  module: {
    rules: [
      ...
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      ...
    ]
  },
  resolve: {
    modules: ["node_modules", path.resolve(__dirname, "src")],
    extensions: ['.js', '.scss', ...]
  }
}

然后，你可以检查你的输出目录，会有main.css. 该插件将默认名称设置为[name].css（条目名称）。

Answer 4

你看过https://www.npmjs.com/package/extract-text-webpack-plugin吗？你可能会需要它。