我的任务是将Django项目的静态资产管理转换为webpack(它目前使用django pipeline)。
我完成了JavaScript没有问题,然后转移到SASS文件,使用sass-loader,我恐怖似乎想要将CSS转换为JavaScript,这显然是一件事情。
问题:
编辑:
显然是css-loader
将.css转换为js而不是sass-loader
,但如果我将其评论如下:
module: {
rules: [
{test: /\.(js|es6)$/, exclude: /node_modules/, loader: "babel-loader" },
{test: /\.css$/, exclude: /node_modules/, loader: "raw-loader"},
{
test: /\.(sass|scss)$/,
use: [
//"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}
]
}
然后我得到:
Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type.
那么我可以,或者我可以不使用sass-loader来编译sass到css?
我相信是css-loader
将.css
转换为js
而不是sass-loader
。 Check first three lines in sass-loader readme。
我是开发人员,所以我只能回答你的第一个问题:
css
转换为js
?
您可以使用相对路径(否则您必须记住编译后项目的结构)。
您可以导入类的名称并将哈希附加到它。在这种情况下,您可以重复使用类名称.box
.container
等,而不用担心会破坏您的样式中的某些内容,因为在编译版本中,它们看起来像来自一个文件的.box-h12f2
和来自另一个文件的.box-aeg2
。
您可以将值从css导入js。有些库可以自定义颜色,但是它们在js中进行。通常你想拥有单一的事实来源,以便在整个项目的一个地方轻松改变风格。试试这个配置(用src / styles.scss文件)
const
path = require('path'),
webpack = require('webpack'),
MiniCssExtractPlugin = require('mini-css-extract-plugin');
const srcFolder = path.resolve(__dirname, 'src');
const miniCssExtractPlugin = new MiniCssExtractPlugin();
const config = {
resolve: {
modules: [ srcFolder, 'node_modules', ],
extensions: [ '.js', ],
},
entry: [
path.resolve(srcFolder, 'styles.scss'),
],
output: {
path: path.resolve(__dirname, 'build'),
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
}
]
},
plugins: [
miniCssExtractPlugin
]
};
module.exports = config;