Блог

Главная - Вопросы по программированию - Я пытаюсь импортировать переменные SASS в свой файл javascript

Я пытаюсь импортировать переменные SASS в свой файл javascript

#javascript #html #css #webpack #sass

#javascript #HTML #css #webpack #sass

Вопрос:

Я пытаюсь заставить свой .js файл видеть переменные SASS, я следил за этой статьей. В этом вопросе содержится ошибка, которую я получаю при попытке использовать этот метод. Но даже если вам удалось импортировать переменные SASS в javascript другим способом, пожалуйста, поделитесь со мной своим успехом!

Я покажу вам код, который я написал, и ошибку, которую я получаю. Сначала код:

Мой webpack.config.js файл:

 module.exports = {

    entry: `./sass.js`, 
    output: {
      path: `${__dirname}`, 
      filename: 'bundle.js'
    },
    mode: 'development',

    // ...
    module: {
        rules: [
        {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
        },
        // ...
        ]
    }  
}

Мой .scss файл:

 
$kiwi: red;

:export {
    kiwi: $kiwi,
}

Мой .js файл:

 import variables from './webpack_sass.scss';

Мой .html файл (который я проверил, правильно отображается bundle.js ):

 <head>
  <script type="module" src="./bundle.js"></script>
</head>

Я установил webpack amp; webpack-cli . Вот изображение моего package.json файла:

введите описание изображения здесь

Ошибка, которую я получаю,:

введите описание изображения здесь

Комментарии:

1. переменные — это идентификатор, а не строка — он не должен иметь кавычек.

2. Спасибо @RandyCasburn. Я внес это изменение и обновил сообщение об ошибке

3. В зависимости от того, что вам нужно сделать со значениями, вы можете установить переменные SASS в качестве переменных CSS и получить / установить их с помощью JS.

4. @DavidAlsbright Я действительно хочу использовать переменные SASS, поскольку есть так много статей, в которых утверждается, что это легко сделать, если вы введете «импортировать переменные sass в javascript» в Google. Я не знаю, чего мне не хватает.

5. @DavidAlsbright В итоге я безуспешно попробовал ваш метод. Я мог бы опубликовать новый вопрос, устраняющий неполадки. Или у вас есть надежный источник, который вы могли бы передать, который инструктирует меня, как это сделать? Это работает, когда значение переменной CSS является обычным значением свойства CSS, но не тогда, когда это переменная SASS. То, что регистрируется, — это буквальные буквы этих переменных SASS, например $color .

Ответ №1:

:export синтаксис — это сахар, который css-loader добавляет, все, что вам нужно сделать, это включить функцию css-modules.

У вас есть 2 варианта:

  1. добавьте .module.scss суффикс в свой файл (поскольку css-модуль включен для него по умолчанию)
  2. включите css-модули для всех .scss импортируемых файлов, указав
 // webpack.config.js

module.exports = {
  entry: `./sass.js`,
  output: {
    path: `${__dirname}`,
    filename: 'bundle.js',
  },
  mode: 'development',

  // ...
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // <- this enables css-modules for all imports
            },
          },
          'sass-loader',
        ],
      },
      // ...
    ],
  },
};

Комментарии:

1. Я поместил картинку внизу своего сообщения, чтобы показать, как теперь выглядит файл конфигурации. Все еще получаю ту же ошибку

2. Можете ли вы добавить весь webpack.config? Мое предложение не должно быть улучшено как решение для копирования и вставки

3. Вы имеете в виду интегрировать его в то, что у меня уже было? Я пытался. Можете ли вы дать ему ответ в своем ответе?

4. Я интегрировал опцию loader в ваш код… но, пожалуйста, сначала попробуйте использовать параметр имени файла … (переименуйте ваш файл css в .module.scss вместо .scss )

5. Я смог заставить его работать, 1. используя ваш webpack.config.js файл (тот, что в статье, не работает) и 2. установив sass css-loader style-loader sass-loader , о котором в статье не упоминается. Потому что я i) чувствую, что я копирую .config файл, не понимая, что происходит ii) Я использую react и не уверен, что модифицирую webpack.config.js там файл amp; iii) добился успеха, присвоив значение переменных SASS переменным CSS и импортировав эти переменные CSS в .js , я собираюсь прекратить использовать это решение. Я согласен с тем, что IE не поддерживает переменные CSS.