Question

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

快速上下文：我有一个带有样式表目录的公共目录和一个构建目录。 webpack将应用程序编译为build，我希望将sass编译style.css放入stylesheets目录。

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

我希望能够在我的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 });

我做了noob错误忘记添加：

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': {}
 }
}

package.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

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

Answer 4

最近的解决方案，可以使用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（条目名称）。

Webpack sass to css指定一个特定的文件夹？

4 个答案: