react+webpack+scss 怎么编译css独立文件

Posted 2023-04-04

参考技术A 处理scss文件需要 sass-loader
npm install sass-loader node-sass --save-dev
【注】 以下配置中需要用到的模块，请自行安装
extract-text-webpack-plugin
postcss-loader
precss
autoprefixer
然后在webpack.config.js文件做以下配置
//css文件提取器需要的插件var ExtractTextPlugin=require('extract-text-webpack-plugin');//postcss-loader 需要的配置项var precss = require('precss');var autoprefixer = require('autoprefixer');module.exports = ... module: loaders: [ test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader','sass') ] , postcss: function () return [precss, autoprefixer];

使用react + webpack时如何使用绝对路径导入自定义scss？

【中文标题】使用react + webpack时如何使用绝对路径导入自定义scss？

【英文标题】：How to use absolute path to import custom scss, when using react + webpack?

【发布时间】：2016-06-26 12:52:21

【问题描述】：

在一个 scss 文件中，我正在尝试导入自定义的、广泛使用的 scss 块（在 React/SASS/Webpack 堆栈中）。

这样我就可以使用共享的 mixin。

假设我正在创建一个 MyAdminButton，并且我想导入涉及项目所有按钮的 scss 文件。 （这是自定义的 scss，而不是供应商/外部的）。

看起来像这样：

//this actually works but it is a code smell : what if the current file moves ?
@import "../../stylesheets/_common-btn-styles.scss";

.my-admin-btn 
    // here I can use a shared mixin defined in _common-btn-styles.scss

这听起来不太好，因为如果我的 scss 文件移动了，那么一切都会损坏。

感谢您的帮助

【问题讨论】：

因为重构非常频繁，尤其是如果我将 scss 文件放在我的 js 文件旁边：将与同一组件相关的所有内容放在同一个文件夹中非常有用。

我有手动脏检查和自动化测试，但我在这里寻找稳健性。我知道我会毫无顾忌地移动文件夹。

您可以使用-I 参数指定导入路径。请参阅man scss 了解更多信息。

@Klaus 嗯？如何在代码中使用 CLI 参数？

【参考方案1】：

找到了。实际上，您可以在 webpack.config.json 中配置 sass-loader，如下所述：https://github.com/jtangelder/sass-loader

这里是相关部分：

sassLoader: 
   includePaths: [path.resolve(__dirname, "./some-folder")]

【讨论】：

你把它放在文件的什么地方？绝对路径真的有效吗？

【参考方案2】：

您可以使用 resolve.modules 将 stylesheets 添加到 Webpack 模块中

// webpack.config.js
const path = require('path')

module.exports = 
  // ...
  resolve: 
    modules: [
      'node_modules',
      path.join(__dirname, 'path/to/stylesheets'),
    ],
  ,

并且 sass-loader 允许您从模块中导入 _common-btn-styles.scss。 https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

@import "~_common-btn-styles.scss";

.my-admin-btn 
  // Use the shared mixins

【参考方案3】：

Webpack 5

webpack 5 的配置不同，因为 includePaths 应在选项 sassOptions 中指定：

// Webpack config

  test: /\.scss$/,
  loader: 'sass-loader',
  options: 
    sassOptions: 
      includePaths: [path.resolve(__dirname, '<path to styles>')],
    ,
  ,
,

Webpack 4

我不得不做更多的研究来使用其他答案来解决这个问题，所以这是我的工作解决方案：

// Webpack config

  test: /\.scss$/,
  loader: 'sass-loader',
  options: 
    includePaths: [path.resolve(__dirname, '<path to styles>')],
  ,
,

然后在您的scss 文件中：

@import 'filename.scss'; // Imported from <path to styles> folder.

.style 
  //...

【参考方案4】：

如果你使用 allows absolute imports 的 Create React App v3，你可以使用波浪号

@import "~theme/colors";

【讨论】：

也适用于 Angular 11 中的 sass

【参考方案5】：

在 react-scripts 最新版本中，您可以在项目根目录中添加一个 .env 文件，其变量为 SASS_PATH=node_modules:src。

要指定更多目录，您可以将它们添加到由 : 分隔的 SASS_PATH，例如 path1:path2:path3

official doc